<!--
 * @Author: Lzx
 * @Date: 2022-03-09 19:59:02
 * @LastEditors: Lzx
 * @LastEditTime: 2022-04-23 17:33:45
 * @FilePath: /web-vue/src/views/Index/index.vue
 * @Description: 统计分析页
-->
<template>
  <div>
    <el-row class="data-table row-panel row-panel-first">
      <el-col>
        <el-card class="occupy-chart">
          <el-col>
            <el-divider content-position="left">
              <h3>统计分析汇总</h3>
            </el-divider>
            <el-form size="medium" :inline="true">
              <el-form-item>
                <el-button
                  type="primary"
                  icon="el-icon-search"
                  @click="onRenderChart()"
                  >刷新
                </el-button>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="24">
            <div :id="chart1.name" style="width: 100%; height: 400px"></div>
          </el-col>
          <el-col :span="24">
            <div :id="chart3.name" style="width: 100%; height: 400px"></div>
          </el-col>
          <el-col :span="24" class="row-panel">
            <div :id="chart2.name" style="width: 100%; height: 400px"></div>
          </el-col>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 统计图
      chart1: {
        label: "月度销售额",
        name: "neighbourhoodChart",
      },
      chart2: {
        label: "评价-订单量占比",
        name: "temperatureLevelChart",
      },
      chart3: {
        label: "房源-销售额占比",
        name: "houseCostChart",
      },
      neighbourhoodChartIns: null,
      temperatureLevelChartIns: null,
      houseCostChartIns: null,
    };
  },

  // 组件挂载时
  mounted() {
    this.onRenderChart();
  },

  methods: {
    // 渲染统计图
    onRenderChart() {
      if (!this.neighbourhoodChartIns) {
        this.neighbourhoodChartIns = this.$echarts.init(
          document.getElementById(this.chart1.name)
        );
      }
      if (!this.temperatureLevelChartIns) {
        this.temperatureLevelChartIns = this.$echarts.init(
          document.getElementById(this.chart2.name)
        );
      }
      if (!this.houseCostChartIns) {
        this.houseCostChartIns = this.$echarts.init(
          document.getElementById(this.chart3.name)
        );
      }

      // 配置项
      let missionProgressOption = {
        title: {
          text: this.chart1.label,
          textStyle: {
            color: "#235894",
          },
        },
        tooltip: {
          trigger: "item",
        },
        xAxis: {
          type: "category",
          data: [],
        },
        yAxis: {
          type: "value",
          minInterval: 0.01,
        },
        series: [
          {
            data: [],
            type: "bar",
            showBackground: true,
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)",
            },
          },
          {
            data: [],
            type: "line",
            showBackground: true,
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)",
            },
          },
        ],
      };
      let missionProgressOption2 = {
        title: {
          text: this.chart2.label,
          textStyle: {
            color: "#235894",
          },
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          left: "right",
        },
        toolbox: {
          show: false,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        series: [
          {
            name: "订单数：",
            type: "pie",
            radius: [50, 250],
            center: ["50%", "50%"],
            roseType: "area",
            itemStyle: {
              borderRadius: 8,
            },
            data: [],
          },
        ],
      };
      let missionProgressOption3 = {
        title: {
          text: this.chart3.label,
          textStyle: {
            color: "#235894",
          },
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          left: "right",
        },
        toolbox: {
          show: false,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        series: [
          {
            name: "销售额：",
            type: "pie",
            radius: [50, 250],
            center: ["50%", "50%"],
            roseType: "area",
            itemStyle: {
              borderRadius: 8,
            },
            data: [],
          },
        ],
      };

      const loading = this.$loading({
        target: document.querySelector(".occupy-chart"),
        lock: true,
        text: "正在统计，请耐心等待！",
      });

      this.$api
        .getDataStatistic()
        .then((res) => {
          loading.close();

          let { status, message, data } = res.data; // 响应数据
          if (status == 200) {
            // 图一
            missionProgressOption.xAxis.data = data["timeX"];
            missionProgressOption.series[0].data = data["costY"];
            missionProgressOption.series[1].data = data["costY"];
            // 图二
            missionProgressOption2.series[0].data = data["appraiseCount"];
            // 图三
            let houseCountData = data["houseCount"];
            houseCountData.forEach((o) => {
              o["name"] = this.$store.state.DICT.houseMap.get(o.name);
            });
            missionProgressOption3.series[0].data = houseCountData;
          } else if (status == 403) {
            missionProgressOption.xAxis.data = [];
            missionProgressOption.series[0].data = [];
            missionProgressOption.series[1].data = [];
            missionProgressOption2.series[0].data = [];
            missionProgressOption3.series[0].data = [];

            this.$message({
              message: `权限不足！${message}`,
              type: "error",
              center: true,
              duration: 1680,
            });
            // this.$router.push("/login");
          } else {
            this.$message({
              type: "warning",
              message: `${message}`,
              duration: 1680,
            });
          }

          // 渲染
          this.neighbourhoodChartIns.setOption(missionProgressOption);
          this.temperatureLevelChartIns.setOption(missionProgressOption2);
          this.houseCostChartIns.setOption(missionProgressOption3);
        })
        .catch(function (err) {
          loading.close();
          console.log(`【数据统计】接口发生错误: ${err}`);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
// 表单布局样式
@import "@/assets/css/form-layout.scss";
</style>
